import React from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'
import { VariableSizeList as List, ListChildComponentProps, areEqual } from 'react-window'
import { useHeight } from './hooks'
import { ListItem } from './listItem'
import { usePendingStore } from '../store'
import shallow from 'zustand/shallow'
import { PendingItem, PendingMt } from '../../../translator'

interface RowRendererProps extends ListChildComponentProps {
	data: PendingItem<PendingMt>[]
}
const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	return (
		<div style={style}>
			<ListItem data={rowData} />
		</div>
	)
}, areEqual)

function PendingList() {
	const { list, searchType } = usePendingStore(
		(state) => ({ list: state.list, searchType: state.searchType }),
		shallow
	)
	const listHeight = useHeight(list, searchType)
	return (
		<AutoSizer>
			{({ width, height }) => {
				return (
					<List
						ref={listHeight.ref}
						width={width}
						height={height}
						itemCount={list.length}
						itemSize={(index) => listHeight.height[index]}
						itemData={list}
						itemKey={(index, data) => list[index].id + index}
					>
						{rowRenderer}
					</List>
				)
			}}
		</AutoSizer>
	)
}
export default PendingList
